<html>


<head>

    <meta charset="utf-8">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

    <script src="./layui-v2.5.6/layui/layui.js"></script>

    <link href="./layui-v2.5.6/layui/css/layui.css" rel="stylesheet">

    <style>

        .up_form {

            font-size: 25px;

        }

    </style>

    <script>

        var img_files //图片对象

        var img_num //获取文件数量

        var index_iframe //先得到当前iframe层的索引

        window.onload = function() {

            //var index_iframe = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

        }


        function img_change() {


        }


        function run() {

            var ok_num = 0; //上传完成的图片数量

            img_files = document.getElementById("img").files;

            img_num = img_files.length;

            var formFile = new FormData(); //新建FormData对象

            for (var i = 0; i <= img_num - 1; i++) {

                if (img_files[i].type.indexOf("image") != -1) { //如果是图片文件

                    formFile.set("image", img_files[i]); //添加image参数

                    formFile.set("token", "3fb7735efbeaff86f12bd1b70a152ca8"); //添加用户参数

                    console.log(img_files[i])

                    data = formFile

                    $.ajax({

                        url: "https://pic.baixiongz.com/api/upload",

                        type: "POST",

                        data: data,

                        cache: false,

                        contentType: false,

                        processData: false,
                        
                        async: false,

                        success: function(data) {

                            if (data['code'] == 200) {

                                ok_num++; //完成数自增

                                var img_json = data['data']; //图片信息JSON

                                var img_url = img_json['url']; //图片链接

                                var img_md5 = img_json['md5']; //图片MD5

                                var img_sha1 = img_json['sha1']; //图片sha1

                                var img_mime = img_json['mime']; //图片格式

                                var img_size = img_json['size']; //图片大小

                                var album_title = document.getElementById("album_title").value

                                var shooting_team = document.getElementById("shooting_team").value

                                var shooting_people = document.getElementById("shooting_people").value

                                console.log("图片链接:" + img_url)

                                console.log("图片MD5:" + img_md5)

                                console.log("图片sha1:" + img_sha1)

                                console.log("图片格式:" + img_mime)

                                console.log("图片大小:" + img_size)

                                console.log("图集标题:" + album_title)

                                console.log("拍摄团队:" + shooting_team)

                                console.log("拍摄对象:" + shooting_people)

                                $.post("./API/add_img_msg.php", {

                                    "img_url": img_url,

                                    "img_md5": img_md5,

                                    "img_sha1": img_sha1,

                                    "img_mime": img_mime,

                                    "img_size": img_size,

                                    "album_title": album_title, //图集标题

                                    "shooting_team": shooting_team, //拍摄团队

                                    "shooting_people": shooting_people, //拍摄对象

                                }, function(data) {

                                    console.log(data)

                                });

                                //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作

                                layui.use('element', function() {

                                    var current_upload_progress = ok_num / img_num * 100 + "%" //当前上传进度

                                    var element = layui.element;

                                    element.progress('upload_progress', current_upload_progress);

                                });

                                if (ok_num == img_num) {

                                    //iframe弹窗关闭自身

                                    //parent.layer.close(index_iframe);

                                }

                            } else {

                                alert("图片上传错误" + data['code'])

                            }

                        }

                    });

                }

            }

        }

    </script>

</head>


<body>

    <div id="main_box" style="text-align: center;">

        <div class="up_form">

            <!--图集标题-->

            图集标题：<input type="text" id="album_title">

            <br/>

            <br/>

            <!--拍摄团队-->

            拍摄团队：<input type="text" id="shooting_team">

            <br/>

            <br/>

            <!--拍摄对象-->

            拍摄对象：<input type="text" id="shooting_people">


        </div>

        <div id="up" style="margin:20px;">

            <input class="up_form" type="file" id="img" onchange="img_change() " multiple>

            <button class="up_form" onclick="run() ">上传</button>

        </div>

        <!--滚动条-->

        <div id="up_scroll">

            <div class="layui-progress layui-progress-big" lay-filter="upload_progress">

                <!--这他妈奇葩用lay-filter来当尼玛ID-->

                <div class="layui-progress-bar" lay-showPercent="yes"></div>

            </div>

        </div>

    </div>

</body>


</html>
